This commit aims to solve issue (#6 Add an intro to the app on first … - #21

In src/App.jsx around lines 16-18 (and similarly for the render logic at lines
45-61), remove the debug console.log and add a guard for the initial null state
of isFirstLaunch so the component returns a neutral/loading placeholder (or
null) while isFirstLaunch === null to avoid flashing the Home screen; then
continue rendering the normal UI only when isFirstLaunch is true/false.

In src/components/OpenFilePage.jsx around lines 23 to 27, avoid calling
getItemProps twice and overriding its className: call getItemProps once (e.g.,
const itemProps = getItemProps(idx)), merge className by combining
itemProps.className with your own additional classes instead of overwriting,
spread the resulting merged props onto the div, and use a stable key (for
example file.id or file.path) instead of the array index to prevent React key
instability.

In src/pages/OpenFileGuide.jsx around lines 13 to 15, the <img> element uses a
non-descriptive alt ('snapshot1') and includes an unnecessary 'flex' utility in
its className; update the alt to a meaningful description of the image content
(e.g., what the snapshot shows) and remove 'flex' from the className (replace
with appropriate image layout utilities such as block or mx-auto and responsive
sizing if needed) so the image is accessible and not mis-styled.

src/pages/OpenFileGuide.jsx around line 16: the button lacks an explicit type
attribute and uses a nonstandard Tailwind class "left-170". Add type="button" to
the button element and replace the invalid utility with a valid Tailwind layout
utility — either a semantic margin (e.g., ml-40 or another appropriate ml-
value) or an arbitrary value syntax (e.g., left-[170px]) if absolute positioning
is required; ensure the chosen utility matches the surrounding layout (keep
relative positioning if using left-[170px] or switch to margin for flow-based
spacing).

In src/pages/WelcomePage.jsx around line 5, remove the debug
console.log(localStorage.getItem("profile")) statement; replace it with either
no logging or, if you need to read the stored value here, use the consistent key
used elsewhere (localStorage.getItem("name")) and assign it to a variable for
use in the component instead of logging, ensuring key names match across
Name.jsx and About.jsx.

In src/App.jsx around lines 20–23 remove the now-unused declarations "const
[query, setQuery] = useState(\"\"); const inputRef = useRef(null); const
[currentPage, setCurrentPage] = useState(\"home\");" and any references to them;
if the functionality is required, move the state and ref into the specific page
component (e.g., HomePage) and update that component to manage
query/inputRef/currentPage instead; also remove unused imports (useState,
useRef) from the top of App.jsx to silence lint errors and run the app to
confirm no remaining references.

In src/App.jsx around lines 41 to 43, the useEffect that calls
inputRef.current?.focus() runs against a ref that is not rendered in this
component; move the focus logic to the component that actually mounts the input
(e.g., HomePage). Remove the useEffect from App.jsx, and add an equivalent
useEffect inside the input-owning component that references its local ref
(create ref there if needed) so focus is applied when that component mounts.

In src/hooks/useFirstLaunch.jsx around lines 6 to 14, the hook writes
localStorage.setItem("firstLaunch", "true") on first run but then treats the
mere existence of the key as "not first launch", which is semantically
confusing; change the stored value to reflect that the onboarding was completed
(e.g., set "firstLaunch" to "completed" or "false") or rename the key to a
clearer name like "hasSeenWelcome", and update the getItem/ setItem checks so
the stored value meaning matches the boolean returned by setIsFirstLaunch (e.g.,
treat missing key as first launch, on first run set key to "completed" or
"trueSeen", and on subsequent loads read that value to setIsFirstLaunch(false)).

In src/pages/ClipboardGuide.jsx around lines 2–3, the image imports have
inconsistent/typo'd names: line 2 imports snapshot1.png as "snapshort1" and line
3 imports "snapshort2.png" as snapshot2; rename the import variables to be
consistent (import snapshot1 from '../assets/snapshot1.png' and import snapshot2
from '../assets/snapshot2.png') and update line 14 to use snapshot1 instead of
snapshort1; also ensure the asset filename is corrected on disk (rename
snapshort2.png → snapshot2.png) so the import paths match.

In src/pages/GuideEnd.jsx around lines 8 to 10 the heading div lacks a text
color and will render as black on the dark gray background; add an explicit text
color class (e.g., text-white or text-neutral-100) to the div (or its parent) so
the text is visible on bg-[#3D3C3C], keeping existing typography classes.

In src/pages/OnlineSearchGuide.jsx around line 8, the Tailwind class
"justify-left" is invalid; replace it with "justify-start" so the div uses the
correct flexbox left alignment utility. Update the className string accordingly
to remove "justify-left" and add "justify-start" (keeping the other classes
unchanged).

In src/pages/OnlineSearchGuide.jsx around line 15, the Tailwind class "left-170"
is invalid; replace it with a valid positioning utility such as using Tailwind's
arbitrary value syntax (e.g., left-(170px)) or remove absolute left positioning
and use layout utilities like ml-auto or justify-end on the flex container to
push the button to the right; update the className accordingly and ensure the
element has a positioning context (e.g., relative/absolute) if you keep
left-(170px).

In src/pages/Name.jsx around lines 10 to 14, the formState.errors value is
destructured but never used; remove the unused `errors` from the destructuring
to clean up the code (i.e., change the useForm destructure to only pull register
and handleSubmit) so the component no longer declares an unused variable.

In src/pages/Name.jsx around lines 16 to 20, the onSubmit handler writes to
localStorage without validating the name or handling storage errors; update it
to trim the input and reject empty or whitespace-only names (set a form error or
display a message), add a try/catch around localStorage.setItem to
handle/storage quota or private-mode exceptions, only call navigate('/About')
when storage succeeds, and surface any error to the user; additionally,
configure react-hook-form validation rules for the name field (required,
minLength, pattern to disallow only whitespace) so invalid submissions are
blocked at the form level.

In src/pages/Name.jsx around lines 27-29, the text input has no accessible
label; add one by giving the input an id (e.g., id="name") and inserting a
corresponding <label htmlFor="name">Name</label> immediately before the input
(or, if you prefer not to render a visible label, add an aria-label="Name"
attribute to the input instead); ensure the label text is descriptive and that
the id used by htmlFor matches the input id.